<template>
<div>
    <div class="topPart">
        <div class="head">
            <div class='tit'>
                用户分析
            </div>
            <div class="query">
                <div class="time">
                    <span :class="queryType=='1'?'on':''" @click="queryType='1'">今日</span>
                    <span :class="queryType=='2'?'on':''" @click="queryType='2'">近七天</span>
                    <span :class="queryType=='3'?'on':''" @click="queryType='3'">近30天</span>
                    <el-date-picker v-model="value1" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>
        </div>
        <div class="tjData">
            <div class="item">
                <p>{{info.viewUserNum||0}}</p>
                <p>访问用户量</p>
            </div>
            <div class="item">
                <p>￥{{info.totalAmount||0}}</p>
                <p>交易总金额</p>
            </div>
            <div class="item">
                <p>{{info.refundNum||0}}</p>
                <p>退款数量</p>
            </div>
            <div class="item">
                <p>￥{{info.refundAmount||0}}</p>
                <p>退款总金额</p>
            </div>
            <div class="item">
                <p>{{info.paidUserNum||0}}</p>
                <p>支付用户数</p>
            </div>
            <div class="item">
                <p>{{info.payRatio||0}}</p>
                <p>支付转化率</p>
            </div>
        </div>
        <div class="chart">
            <div ref="amount">
            </div>
            <div ref="number">
            </div>
        </div>
    </div>
    <div class="bottomPart">
        <!-- <div class='tit'>
            用户数量
        </div> -->
        <div ref="bottomNumber" class="bottomNumber">
        </div>
    </div>
</div>
</template>

<script>
var that;
import * as echarts from "echarts";
export default {
    data() {
        return {
            queryType: '1',
            x: [],
            y: [],
            z: [],
            y1: [],
            z1: [],
            userData: [],
            titles: {
                amount: '订单金额',
                number: '订单数量',
                bottomNumber: '用户数量'
            },
            titles2: {
                amount: '退款金额',
                number: '退款数量',
                bottomNumber: '用户数量'
            },
            value1: [],
            info: {
                orderNumTotal: 0,
                refundAmountTotal: 0,
                orderAmountTotal: 0,
                refundNumTotal: 0,
            },
            dateStart: '',
            dateEnd: '',
        }
    },
    mounted() {
        that = this;
        this.getday2(0);
        this.getdataOverview();
    },
    watch: {
        value1(newval, oldval) {
            console.log(newval)
            if (newval != oldval) {
                if (newval) {
                    this.dateStart = newval[0];
                    this.dateEnd = newval[1];
                    this.getdataOverview();
                    this.queryType = "";
                } else {
                    this.queryType = '1';
                }
            }
        },
        queryType(newval, oldval) {
            if (newval != oldval) {
                if (newval == '2') {
                    this.getday2(6);
                }
                if (newval == '3') {
                    this.getday2(30);
                }
                if (newval == '1') {
                    this.getday2(0);
                }
                this.getdataOverview();
            }
        }
    },
    methods: {
        //返回最近七天的日期
        getday2(daysNum) {
            let days = [];
            var date = new Date();
            for (let i = 0; i <= 24 * daysNum; i += 24) { //今天加上前6天
                let dateItem = new Date(date.getTime() - i * 60 * 60 * 1000); //使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
                let y = dateItem.getFullYear(); //获取年份
                let m = dateItem.getMonth() + 1; //获取月份js月份从0开始，需要+1
                let d = dateItem.getDate(); //获取日期
                m = this.addDate0(m); //给为单数的月份补零
                d = this.addDate0(d); //给为单数的日期补零
                let valueItem = y + '-' + m + '-' + d; //组合
                days.push(valueItem); //添加至数组
            }
            console.log('最近七天日期：', days);
            this.dateStart = days[0];
            this.dateEnd = days[daysNum]
        },

        //给日期加0
        addDate0(time) {
            if (time.toString().length == 1) {
                time = '0' + time.toString();
            }
            return time;
        },
        getdataOverview() {
            this.$http.post('/sys/homeoverview/userAnalyze', {
                startDate: this.dateStart,
                endDate: this.dateEnd,
            }).then(res => {
                if (res.data.code == 0) {
                    this.info = res.data.data.head || {};
                    let x = [],
                        y = [],
                        z = [],
                        y1 = [],
                        z1 = [],
                        userData = [];
                    if (res.data.data.trendList) {
                        for (let i = 0; i < res.data.data.trendList.length; i++) {
                            x.push(res.data.data.trendList[i].dateStr);
                            y.push(res.data.data.trendList[i].totalNum);
                            z.push(res.data.data.trendList[i].totalAmount);
                            y1.push(res.data.data.trendList[i].refundNum);
                            z1.push(res.data.data.trendList[i].refundAmount);
                            userData.push(res.data.data.trendList[i].personIncNum)
                        }
                    }
                    //金额
                    this.x = x;
                    this.y = y;
                    this.z = z;
                    this.y1 = y;
                    this.z1 = z;
                    this.userData = userData;
                    setTimeout(() => {
                        this.line(x, y, z, 'amount');
                        this.line(x, y1, z1, 'number');
                        this.line(x, userData, [], 'bottomNumber');
                    }, 500);

                }

            })
        },
        line(xLabel, y, z, name) {
            let myChart = echarts.init(this.$refs[name]);
            const option = {
                title: {
                    textStyle: {
                        color: '#111',
                        fontSize: 20,
                    },
                    x: '20px',
                    y: '25px',
                    text: that.titles[name]
                },
                color: ['#1DCA68', '#ED5555'],
                tooltip: {
                    trigger: 'axis',
                    borderWidth: 2,
                    padding: [5, 10],

                },
                legend: {
                    align: 'left',
                    right: '30px',
                    top: '25px',
                    type: 'plain',
                    textStyle: {
                        color: '#111111',
                        fontSize: 12,
                    },
                },
                grid: {
                    top: '20%',
                    left: '100px',
                    right: '30px',
                    bottom: '5%',
                    // containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    name: '',
                    nameGap: 10,
                    nameTextStyle: {
                        // ---坐标轴名称样式
                        color: '#111',
                        fontSize: 15,
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#111', // 更改坐标轴文字颜色
                            fontSize: 12, // 更改坐标轴文字大小
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#7299D4',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    data: xLabel,
                }, ],
                yAxis: [{
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: [5, 10],
                            dashOffset: 10,
                            color: '#C6D7F1'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#111', // 更改坐标轴文字颜色
                            fontSize: 12, // 更改坐标轴文字大小
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#7299D4',
                        },
                    },
                }, ],
                series: [{
                        name: that.titles[name],
                        type: 'line',
                        symbolSize: 0,
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 2,
                            },
                        },
                        data: y,
                    },
                    {
                        name: that.titles2[name],
                        type: 'line',
                        symbolSize: 0,
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 2,
                            },
                        },
                        data: z,
                    }
                ]
            }
            myChart.setOption(option);

        }
    }
}
</script>

<style lang="scss" scoped>
/deep/.el-tabs__item {
    height: 46px !important
}

.chart {
    display: flex;

    &>div {
        width: 50%;
        height: 350px;
    }
}

.bottomNumber {
    width: 100%;
    height: 350px;
}

.topPart,
.bottomPart {
    background-color: #fff;
    padding: 24px 20px;
    border-radius: 10px;
    margin-bottom: 16px;

    .tit {
        font-weight: bold;
        font-size: 20px;
        color: #111;
        margin-bottom: 15px;
    }

    .query {
        position: relative;

        .time {
            position: absolute;
            right: 0;
            //width: 200px;
            bottom: 12px;
            z-index: 1;

            span {
                display: inline-block;
                width: 72px;
                height: 42px;
                border: 1px solid #EAEDF1;
                text-align: center;
                line-height: 40px;
                border-radius: 6px;
                margin-right: 16px;
                cursor: pointer;

                &.on {
                    background-color: #1F78FB;
                    color: #fff;
                }
            }
        }

    }

    .tjData {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 24px;

        .item {
            background-color: #FAFBFE;
            padding: 20px;
            border-radius: 6px;

            p {
                margin: 0;

                &:first-child {
                    font-size: 21px;
                    color: #1F78FB;
                    font-weight: bold;
                }

                &:last-child {
                    color: #111;
                    margin-top: 5px;
                }
            }

        }
    }
}
</style>
